<!DOCTYPE html>
<html>
<head>
<title>JsViews: Step by step</title>
<link href="resources/demos.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="subhead"><< <a href="index.html">Index for JsViews and JsRender</a></div>

<h2>JsViews: Demos</h2>
<ul class="indexitems">
	<li>- <a href="step-by-step/01_rendering-and-linking.html">Rendering and linking</a></li>

	<li class="subhead">Editable data: Two-way declarative data binding of <em>'Observable objects and arrays'</em>:</li>
	<li class="inset">- <a href="step-by-step/02_editable-data.html">using data-bound template tags</a></li>
	<li class="inset">- <a href="step-by-step/02b_editable-data.html">using data-linked elements</a></li>
	<li class="inset">- <a href="step-by-step/02c_editable-data.html">using $observable.observe() for detail view binding</a></li>

	<li>- <a href="step-by-step/03_top-level-linking.html">Top-level linking</a></li>
	<li>- <a href="step-by-step/04_form-elements.html">Form Elements and <em>visible{:...}</em> binding</a></li>
	<li>- <a href="step-by-step/04_form-elements_if-binding.html">Form Elements and <em>{^{if}}</em> binding</a></li>
	<li>- <a href="step-by-step/05_converters.html">Two-way data binding with converters</a></li>

	<li class="subhead">JsViews <em>'Tag Controls'</em>:</li>
	<li class="inset">- <a href="tag-controls/tree-control.html">Tree Control - recursive Tree View and <em>visible{:...}</em> binding</a></li>
	<li class="inset">- <a href="tag-controls/tree-control_if-binding.html">Tree Control - recursive Tree View< and <em>{^{if}}</em> binding</a></li>
	<li class="inset">- <a href="tag-controls/tree-control_editable.html">Tree Control - recursive editable Tree View (<em>{^{if}}</em> binding)</a></li>
	<li class="inset">- <a href="tag-controls/tabs-control.html">Tabs Control - nested Tab Views</a></li>

	<li class="subhead">Computed Observables:</li>
	<li class="inset">- <a href="features/observability/computed-data.html">Computed data properties</a></li>
	<li class="inset">- <a href="features/observability/computed-data-prototype.html">Computed data properties with constructor</a></li>
	<li class="inset">- <a href="features/observability/computed-helper.html">Computed helper functions or template parameters</a></li>
	<li class="inset">- <a href="features/observability/observing-paths.html">Observing properties higher up on paths</a></li>

	<li class="subhead"><em>Miscellaneous examples</em>:</li>
	<li class="inset">- <a href="step-by-step/06_accordion_switching-template.html">Switch templates: Accordion</a></li>
	<li class="inset">- <a href="step-by-step/09_server-rendered_client-activated.html">Server-render then client-activate</a></li>
	<li class="inset">- <a href="step-by-step/10_todos.html">Todos example</a></li>
</ul>

</body>
</html>
